<template>
	<view>
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="修改营业时间" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="businessHoursBox">
			<view class="businessDayBox">
				<view class="top">
					<text class="title">营业日</text>
					<view class="infoBox">
						<radio-group name="businessDay" @change="businessDayChange">
							<label class="radio"><radio class="radioElement" color="#FFCC33" value="1" :checked="businessDay == 1"/>选择营业时间</label>
							<label class="radio"><radio class="radioElement" color="#FFCC33" value="0" :checked="businessDay == 0" />每日营业</label>
						</radio-group>
					</view>
				</view>
				<view class="weekBox" v-if="businessDay == 1" >
					<u-tag v-for="(item,index) in taglist" :key="index" @click="tagindex" :name="item.index" :text="item.name" :borderColor="item.borderColor" plain :bgColor="item.bgColor" :color="item.color" ></u-tag>
				</view>
			</view>
			<view class="businessHourBox">
				<view class="top">
					<text class="title">营业时间段</text>
					<view class="infoBox">
						<radio-group name="businessHour" @change="businessHourChange">
							<label class="radio"><radio class="radioElement" color="#FFCC33" value="2" :checked="businessHour == 2"/>跨日营业</label>
							<label class="radio"><radio class="radioElement" color="#FFCC33" value="1" :checked="businessHour == 1" />选择时间段</label>
							<label class="radio"><radio class="radioElement" color="#FFCC33" value="0" :checked="businessHour == 0" />全天</label>
						</radio-group>
					</view>
					<text class="tips">最多可添加3段</text>
				</view>
				<view class="contentBox">
					<view v-if="businessHour == 2 || businessHour == 1">
						<view 
							class="itemBox" 
							v-for="(item,index) in timeArray"
							:key="index"
						>
							<view class="timeBox">
								<text class="startTime" :class="{unselected: item.startTime != null}">选择时间段</text>
								<text class="range">{{businessHour == 2 && index == 0 ? '至次日' : '至'}}</text>
								<text class="endTime" :class="{unselected: item.startTime != null}">选择时间段</text>
							</view>
							<uni-icons v-show="!(businessHour == 2 && index == 0)" @click="delTime(index)" class="icon" type="trash-filled" size="30"></uni-icons>
						</view>
					
						<view class="add flex-center" @click="addTime">
							<uni-icons class="icon" type="plusempty" size="18"></uni-icons>
							<text>新增时间段</text>
						</view>
					</view>
				</view>
				<!-- <text></text> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				businessDay:0,
				businessHour:0,
				taglist:[
					{
						"index":1,
						"name":'周一',
						"borderColor":"#eeeeee",
						"color":"#666666",
						"bgColor":"#eeeeee"
					},
					{
						"index":2,
						"name":'周二',
						"borderColor":"#eeeeee",
						"color":"#666666",
						"bgColor":"#eeeeee"
					},
					{
						"index":3,
						"name":'周三',
						"borderColor":"#eeeeee",
						"color":"#666666",
						"bgColor":"#eeeeee"
					},
					{
						"index":4,
						"name":'周四',
						"borderColor":"#eeeeee",
						"color":"#666666",
						"bgColor":"#eeeeee"
					},
					{
						"index":5,
						"name":'周五',
						"borderColor":"#eeeeee",
						"color":"#666666",
						"bgColor":"#eeeeee"
					},
					{
						"index":6,
						"name":'周六',
						"borderColor":"#eeeeee",
						"color":"#666666",
						"bgColor":"#eeeeee"
					},
					{
						"index":7,
						"name":'周日',
						"borderColor":"#eeeeee",
						"color":"#666666",
						"bgColor":"#eeeeee"
					}
				],
				selectTag:[],
				timeFrame:[],
				transDay:[]
			}
		},
		computed:{
			timeArray(){
				if(this.businessHour == 1){
					return this.timeFrame
				}else if(this.businessHour == 2){
					return this.transDay
				}else{
					return [];
				}
			}
		},
		methods:{
			businessDayChange(event){
				if(event.detail.value == this.businessDay) return;
				this.businessDay = event.detail.value;
			},
			businessHourChange(event){
				if(event.detail.value == this.businessHour) return;
				this.businessHour = event.detail.value;
			},
			tagindex(e){
				let element = e - 1;
				// 判断元素是否在 this.selectTag 中
				if (this.selectTag.includes(element)) {
				  // 如果元素存在，则从数组中删除
				  const index = this.selectTag.indexOf(element);
				  this.selectTag.splice(index, 1);
				} else {
				  // 如果元素不存在，则添加到数组中
				  this.selectTag.push(element);
				}
				
				this.taglist[element].bgColor = this.selectTag.includes(element) ? "#FFCC33" : "#eeeeee";
				this.taglist[element].borderColor = this.selectTag.includes(element) ? "#FFCC33" : "#eeeeee";
				this.taglist[element].color = this.selectTag.includes(element) ? "#FFFFFF" : "#666666";

			},
			delTime(index){
				console.log(index)
			},
			addTime(){
				
				let arrayName = "";
				if(this.businessHour == 1 && this.timeFrame.length <= 2){
					arrayName = 'timeFrame';
					// timeArray = this.timeFrame
				}
				if(this.businessHour == 2 && this.transDay.length <= 2){
					arrayName = 'transDay';
					// timeArray = this.timeFrame
				}
				if(arrayName == ""){
					return false;
				}
				let arrayTemplate = {
						startTime:"",
						endTime:"",
					}
				arrayTemplate.type = this.businessHour;
				this[arrayName].push(arrayTemplate);
				// let timeArray = ;
				// console.log(timeArray)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.businessHoursBox{
		float: left;
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: #fff;
		.businessDayBox{
			width: 94%;
			height: auto;
			float: left;
			margin-left: 3%;
			margin-top: 10rpx;
			.top{
				width: 100%;
				height: 80rpx;
				float: left;
				.title{
					width: auto;
					float: left;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 34rpx;
					font-weight: bold;
					color: #363636;
				}
				.infoBox{
					width: auto;
					float: right;
					height: 100%;
					.radio{
						height: 80rpx;
						line-height: 80rpx;
						float: right;
						margin-left: 8rpx;
						font-size: 27rpx;
						color: rgb(155,155,155);
						.radioElement{
							transform:scale(0.6);
							float: right;
							margin-top: -2rpx;
							margin-left: -5rpx;
						}
					}
				}
			}
			.weekBox{
				width: 100%;
				margin-top: 5rpx;
				height: 55rpx;
				float: left;
				display: flex;
				background-color: #ffffff;
				justify-content: space-around;
			}
		}
		.businessHourBox{
			width: 94%;
			height: auto;
			float: left;
			margin-left: 3%;
			margin-top: 10rpx;
			.top{
				width: 100%;
				height: 80rpx;
				float: left;
				.title{
					width: auto;
					float: left;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 34rpx;
					font-weight: bold;
					color: #363636;
				}
				.infoBox{
					width: auto;
					float: right;
					height: 100%;
					.radio{
						height: 80rpx;
						line-height: 80rpx;
						float: right;
						margin-left: 8rpx;
						font-size: 27rpx;
						color: rgb(155,155,155);
						.radioElement{
							transform:scale(0.6);
							float: right;
							margin-top: -2rpx;
							margin-left: -5rpx;
						}
					}
				}
				.tips{
					width: 100%;
					float: left;
					height: 30rpx;
					line-height: 30rpx;
					font-size: 24rpx;
					margin-top: -20rpx;
					color: rgb(155,155,155);
				}
			}
			.contentBox{
				width: 100%;
				height: 500rpx;
				float: left;
				margin-top:35rpx;
				.itemBox{
					width: 100%;
					height: 90rpx;
					margin-bottom: 20rpx;
					.timeBox{
						width: 88%;
						height: 90rpx;
						float: left;
						background-color: #f9f9f9;
						border-radius: 30rpx;
						.startTime{
							width: 35%;
							margin-left: 5%;
							height: 100%;
							line-height:90rpx;
							float: left;
							font-size: 27rpx;
							color: #333;
						}
						.endTime{
							width: 35%;
							margin-right: 5%;
							height: 100%;
							line-height:90rpx;
							float: right;
							text-align: right;
							font-size: 27rpx;
							color: #333;
						}
						.range{
							width: 20%;
							height: 100%;
							line-height: 90rpx;
							float: left;
							text-align: center;
							font-size: 34rpx;
							color: #333;
							font-weight: bold;
						}
						.unselected{
							color: #979797;
						}
					}
					.icon{
						width: auto;
						float: right;
						height: 90rpx;
						line-height: 90rpx;
						color: #333;
					}
				}
				.add{
					width: 100%;
					height: 80rpx;
					float: left;
					display: flex;
					text{
						font-size: 30rpx;
						color:#333;
						margin-left: 5rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>